<template>
    <view class="punch-item"
        :style="{ backgroundImage: info.clock_status ? `url(${'../../static/images/punch_bg.png'})` : '' }">
        <view class="item-top">
            <image class="top-l" :src="info.face" />
            <view class="top-r">
                <view class="top-title">{{ info.title }}</view>
                <view class="top-original">
                    <text class="mr-10rpx">推荐打卡: </text>
                    <image v-for="count in info.grade" class="star" src="../../static/images/star.png"></image>
                </view>
                <view class="top-btn top-btn-camera" @click="toPhoto" v-if="info.clock_status">
                    <image class="top-img" src="../../static/images/camera.png" />
                    与景点合影
                </view>
                <view class="top-btn" @click="toMap" v-if="!info.clock_status">
                    <image class="top-img" src="../../static/images/go.png" />
                    去这里
                </view>
            </view>
        </view>
        <view class="item-bottom">
            {{ info.description }}
        </view>
    </view>
</template>

<script>
import { navigateTo } from "@/hooks";
import store from "@/store";
export default {
    data() {
        return {
            navigateTo,
        }
    },
    props: {
        info: {
            type: Object,
            default: {}
        },
        spot_id: {
            type: Number,
        }
    },
    computed: {
        rec_url() {
            return this.$store.getters.rec_url;
        }
    },
    mounted() {
    },
    methods: {
        toMap() {
			store.commit('map/set_switch_value', false);
			store.commit("userInfo/set_audio_show", false);
            uni.setStorageSync("scenic_detail", JSON.stringify({ ...this.info, spot_id: this.spot_id, detail: { markerId: this.info.id}, from: "punch" }));
            navigateTo(`/pagesA/ar_navigation/index`);
        },
		
		toPhoto(){
			navigateTo('/pagesB/photo/photo_step_3?spot_id='+this.spot_id+'&points_id='+this.info.id);
		}
    }
}
</script>

<style lang="scss" scoped>
.punch-item {
    padding: 20rpx;
    margin-bottom: 24rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    background: #FFFFFF;
    // background-image: url('../../static/images/punch.png');
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 24rpx;

    .item-top {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .top-l {
            width: 260rpx;
            height: 168rpx;
            margin-right: 24rpx;
            border-radius: 12rpx;
        }

        .top-title {
            margin: 12rpx 0;
            font-weight: 700;
            font-size: 30rpx;
            color: #3D3D3D;
        }

        .top-original {
            margin-bottom: 20rpx;
            display: flex;
            font-size: 24rpx;
            color: #999;

            .star {
                width: 28rpx;
                height: 28rpx;
                margin-right: 4rpx;
            }
        }

        .top-btn {
            width: 182rpx;
            height: 52rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            font-size: 26rpx;
            color: #0CCA92;
            background: linear-gradient(-90deg, rgba(33, 188, 145, 0.2) 0%, rgba(183, 228, 71, 0.2) 100%);
            border-radius: 40rpx;

            .top-img {
                width: 32rpx;
                height: 32rpx;
                margin-right: 8rpx;

            }
        }

        .top-btn-camera {
            width: 232rpx;
            color: #fff;
            background: linear-gradient(-90deg, #0FBCD6 0%, #0CCA91 100%);
        }
    }

    .item-bottom {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>